<template>
	<div class="orderlist">
		<!-- <van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '售后管理' : ''" @click-left="handleBack" /> -->
		<div class="">
			<div class="pageLoading" v-if="pageLoading">
				<van-loading type="spinner" vertical>加载中...</van-loading>
			</div>
			<div class="have" v-if="!pageLoading && list.length">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<div class="have-item" v-for="(item, index) in list" @click="handelDetail(item)" :key="index">
						<div class="item-top">
							<div class="clumns">
								<span>描述：</span>
								<span>{{ item.title }}</span>
							</div>
							<div class="clumns">
								<span>联系电话：</span>
								<span>{{ item.phone }}</span>
							</div>
							<div class="clumns">
								<span>转单时间：</span>
								<span>{{dayjs.unix(item.addtime).format("YYYY-MM-DD HH:mm:ss")}}</span>
							</div>
						</div>
						<div class="item-footer">
							<div class="status">
								<div class="status_item" v-if="item.status==1">
									<span>状态：</span>
									<span style="color: gray;font-weight: bolder;">审核中</span>
								</div>
								<div class="status_item" v-if="item.status==2">
									<span>状态：</span>
									<span style="color: forestgreen;font-weight: bolder;">已同意</span>
								</div>
								<div class="status_item" v-if="item.status==3">
									<span>状态：</span>
									<span style="color: orangered;font-weight: bolder;">拒绝</span>
								</div>
								<div class="status_item" v-if="item.status==4">
									<span>状态：</span>
									<span style="color: gray;font-weight: bolder;">线索提交中</span>
								</div>
								<div class="status_item" v-if="item.status==5">
									<span>状态：</span>
									<span style="color: forestgreen;font-weight: bolder;">线索已发放</span>
								</div>
							</div>
							<div class="clumns">
								<span>备注：</span>
								<span>{{item.beizhu!=''?item.beizhu:'暂无'}}</span>
							</div>


						</div>
						<div class="action" style="z-index: 99999;">
							<van-button @click.stop="goEdit(item)" v-if="item.status==3 " type="primary"
								size="small">编辑</van-button>
							<van-button @click.stop="go_submit_xsImg(item)" v-if="item.status==2 " type="primary"
								size="small">提交线索图片</van-button>
						</div>
					</div>
				</van-list>
			</div>
			<div class="none" v-if="!pageLoading && !list.length">
				<van-empty description="暂无记录" />
			</div>
			<!-- <div class="" style="margin-top: 15px;">
				<van-field @input="onInput"  label="自定义金额" type="number" placeholder="请输入金额" />
			</div> -->



			<!-- <div class="bottom_btn">
				<van-button type="primary" block @click="to_add_fankui">新增反馈</van-button>
			</div> -->
			<div class="bottom_btn">
				<van-button type="primary" block @click="fff">新增反馈</van-button>
			</div>
			<van-popup v-model:show="showCenter" round :style="{ padding: '10px',width:'100%'}">
				<div>
					<!-- <van-radio-group v-model="radioValue" class="radio-group">
						<van-cell-group>
							<van-cell v-for="(item, index) in TkList" :key="index" :title="item.title">
								<template #right-icon>
									<van-radio :name="item.id" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-radio-group> -->


					<van-checkbox-group v-model="radioValue">
						<van-cell-group inset>
							<van-cell v-for="(item, index) in TkList" :key="item" :title="item.title">
								<template #right-icon>
									<van-checkbox :name="item.id" />
								</template>
							</van-cell>
						</van-cell-group>
					</van-checkbox-group>
					<div style="margin: 16px;">
						<van-button round block @click="goAdd">提交</van-button>
					</div>




				</div>

			</van-popup>



		</div>
	</div>
</template>
<script setup lang="ts">
	import { getCookie } from "@/utils/index";
	import { ref, reactive } from "vue";
	import { useRouter } from "vue-router";
	import { isWeixin } from "@/utils/index";
	import wxchat from "@/utils/wechartSdk";
	import { fankuilistApi, ktkorder } from "@/api/user";
	import dayjs from "dayjs";
	import { showToast } from 'vant';
	const router = useRouter();
	const list = ref();
	// const price = ref();
	const pageLoading = ref(false);
	const finished = ref(false);
	const loading = ref(false);
	const pagination = reactive({
		pageNo: 1,
		pageSize: 10,
	});
	// const isCode = getCookie("token");
	// const onInput = (event : any) => {
	// 	// const value = event.detail;
	// 	console.log('xxxxxxxxxxxxxxx', event)
	// 	// price.value = event.detail;
	// }


	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};

	const getList = async () => {
		pageLoading.value = true;
		let { data } = await fankuilistApi({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize,
		});
		list.value = data.data || [];
		if (data.totalPage === 1) {
			finished.value = true;
		}
		pageLoading.value = false;

		let url = window.location.href.split("#")[0] + "?pid=" + Number(getCookie("token"));
		console.log('urlurlzzzzzzzzzzzzzzzzz', url)
		// wxchat.share({
		// 	title: data?.title,
		// 	desc: "我想让你看一下这个方案！！已经帮数千人降低线索成本了！！！",
		// 	link: url,
		// 	image: "http://zdb.suishilian.com/upload/yyb.jpg",
		// });
	};
	getList();


	const onLoad = async () => {
		pagination.pageNo++;
		let { data } = await fankuilistApi({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			pageNo: pagination.pageNo,
			pageSize: pagination.pageSize,
		});
		loading.value = false;
		list.value = [...list.value, ...data.data];
		if (pagination.pageNo >= data.totalPage) {
			finished.value = true;
		}
	};
	// 跳转到详情页面
	const handelDetail = (data : any) => {
		router.push({
			path: '/fankuiDetail',
			query: { id: data.id }
		})
	};

	// 新增反馈 2024-6-4 hdd新增
	const to_add_fankui = () => {

		router.push({
			path: '/addFankui'
		})
	}
	const fff = () => {
		
		if (TkList.value.length <= 0) {
			showToast({
				message: "暂无可退款订单",
				position: "top",
			});
			return
		}
		showCenter.value = true;
	}

	// 编辑
	const goEdit = (data : any) => {
		router.push({
			path: '/editFankui',
			query: { data: JSON.stringify(data) }
		})
	}

	// 提交线索图片
	const go_submit_xsImg = (data : any) => {
		// router.push("/add_xiansuo" + data.id);
		router.push({
			path: '/addNewxx',
			query: { id: data.id }
		})
	}
	const radioValue = ref([])
	const showCenter = ref(false);
	const TkList = ref();
	// 获取可退款列表
	const getTkList = async () => {
		let { data } = await ktkorder({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
		});
		TkList.value = data;
	}
	getTkList();
	const goAdd = () => {
		
		if (radioValue.value.length > 0) {
			router.push({
				path: '/addFankui',
				query: { data: radioValue.value.join() }
			})
		} else {
			showToast({
				message: "请选择需要退款的订单",
				position: "top",
			});
		}
	}
</script>
<style>
	html {
		background-color: #f4faff;
	}

	.orderlist {
		margin-top: 0px;
		padding-bottom: 40px;
	}

	.have-item {
		box-sizing: border-box;
		padding: 20px;
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
	}

	.clumns {
		display: flex;
		margin: 5px 0;
	}

	.clumns span:first-child {
		display: inline-block;
		width: 100px;
		text-align: left;
	}

	.status_item {
		display: flex;
		align-items: center;
	}

	.status_item span:first-child {
		display: inline-block;
		width: 100px;
		text-align: left;
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.action {
		text-align: right;
	}
</style>